<template>
  <el-drawer
    :visible.sync="value"
    :title="formData.id ? '编辑员工' : '添加员工'"
    size="400px"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      v-loading="formLoading"
      :model="formData"
      :rules="formRules"
      label-width="100px"
    >
      <el-form-item label="账号：" prop="username">
        <el-input v-model="formData.username" placeholder="请输入账号" />
      </el-form-item>

      <el-form-item label="员工姓名：" prop="name">
        <el-input v-model="formData.name" placeholder="请输入员工姓名" />
      </el-form-item>

      <el-form-item label="手机号：" prop="phone">
        <el-input v-model="formData.phone" placeholder="请输入手机号" />
      </el-form-item>

      <el-form-item label="性别：">
        <el-radio-group v-model="formData.sex">
          <el-radio label="1">男</el-radio>
          <el-radio label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="身份证号：" prop="idNumber">
        <el-input v-model="formData.idNumber" placeholder="请输入身份证号" />
      </el-form-item>
    </el-form>
    <div
      style="
        display: flex;
        justify-content: flex-end;
        gap: 16px;
        margin: 40px 0 0 0;
      "
    >
      <el-button @click="handleClose">取消</el-button>
      <el-button
        type="primary"
        :loading="submitLoading"
        style="width: 88px"
        @click="handleSubmit"
      >
        保存
      </el-button>
    </div>
  </el-drawer>
</template>

<script>
import { addEmployee, updateEmployee } from '@/api/employee'
import { Message } from 'element-ui'
import { cloneDeep } from 'lodash'

export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formRef: null,
      formLoading: false,
      submitLoading: false,
      formData: {
        id: null,
        username: '',
        name: '',
        phone: '',
        sex: '1',
        idNumber: ''
      },
      formRules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        idNumber: [
          { required: true, message: '请输入身份证号', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    row: {
      immediate: true,
      handler(newVal) {
        // 判断是否为更新
        if (newVal && Object.keys(newVal).length) {
          this.formData = cloneDeep(newVal)
        } else {
          // 新增，重置表单
          this.$nextTick(() => this.resetForm())
        }
      }
    }
  },
  methods: {
    updateEmployee,
    addEmployee,
    resetForm() {
      this.formData = {}
    },
    handleClose() {
      this.$refs.formRef && this.$refs.formRef.resetFields()
      this.resetForm()
      this.$emit('closed')
    },
    async handleSubmit() {
      try {
        await this.$refs.formRef.validate()
        this.submitLoading = true
        const submitData = { ...this.formData }

        const api = this.formData.id ? updateEmployee : addEmployee
        await api(submitData)
        Message.success(this.formData.id ? '更新成功' : '添加成功')
        this.$emit('success')
        this.handleClose()
      } catch (error) {
        // error 可能有msg属性
        console.error(error)
        Message.error(
          error.msg || (this.formData.id ? '更新失败' : '添加失败')
        )
      } finally {
        this.submitLoading = false
      }
    }
  }
}
</script>

<style scoped>
.el-form .el-form-item {
  margin-bottom: 26px;
}
.el-radio-group {
  /* space between radio buttons */
  gap: 32px;
}
.el-radio {
  margin-right: 30px;
}
</style>
